<template>
  <el-container>

    <!-- 左侧显示项目集数据  -->
    <el-aside width="500px">
      <el-steps :active="steps.active" finish-status="success" simple :space="150">
        <el-step title="项目集" />
        <el-step :title="steps.stepsTitle"/>
      </el-steps>
      <el-tree :data="steps.treeData" :props="defaultProps" @node-click="handleNodeClick" />
    </el-aside>

    <!-- 中间显示项目集内具体项目数据 -->
    <el-main>
      <el-button type="success"  @click="handleAdd" >新建项目</el-button>
      <el-tabs type="border-card" @tab-change="handleTabs"  v-model="project.status" >
        <el-tab-pane label="全部" name="" />
        <el-tab-pane label="未开始" name="wait"/>
        <el-tab-pane label="进行中" name="doing"/>
        <el-tab-pane label="已关闭" name="closed"/>
      <el-table :data="project.pageData" style="width: 100%">
        <el-table-column label="项目名称" prop="name"  width="300"  align="left"  >
          <template #default="scope">
            <el-link @click="handleKanban(scope.row.id)">
              <el-icon class="el-icon--right"><Pointer /></el-icon>{{scope.row.name}}
            </el-link>
          </template >
        </el-table-column>
        <el-table-column label="负责人" prop="pm" width="140" align="center"  >
          <template #default="scope">
            <el-link @click="handleUser(scope.row.pm)">
              <el-icon class="el-icon--right"><User /></el-icon>{{scope.row.pm}}
            </el-link>
          </template >
        </el-table-column>
          <el-table-column label="币种类型" prop="budgetUnit" width="120" align="center" >
            <template #default="scope">
            <el-select v-model="scope.row.budgetUnit" disabled >
            <el-option label="人民币" value="CNY" />
            <el-option label="美元" value="USD" />
            </el-select>
            </template>
          </el-table-column>
          <el-table-column label="预算" prop="budget" width="180" align="center"/>
        <el-table-column label="计划开始" prop="begin"  width="120" align="center">
        <template #default="scope">
        {{dateFtt("yyyy-MM-dd",scope.row.begin) }}
        </template>
        </el-table-column>
        <el-table-column label="计划结束" prop="end" width="120" align="center" >
        <template #default="scope">
        {{dateFtt("yyyy-MM-dd",scope.row.end) }}
        </template>
        </el-table-column>

        <el-table-column label="状态" prop="status"  width="80" align="center" >
          <template #default="scope">
            <el-tag
              :type="scope.row.status === 'doing' ? 'success' : scope.row.status === 'wait'? 'info':'warning'"
              disable-transitions
            >{{ scope.row.status  === 'doing' ? '进行中' : scope.row.status === 'wait'? '未开始':'已关闭'}}</el-tag>
          </template>
        </el-table-column>



        <el-table-column align="right"  label="操作"  >
          <template #default="scope">
            <el-space size="large">
              <div v-if="scope.row.status=='wait'">
                <el-button size="small" type="success" :icon="VideoPlay" circle @click="handleRun(scope.row)" />
              </div>
              <div v-if="scope.row.status=='doing'">
                <el-button size="small" type="primary" :icon="SwitchButton" circle @click="handleRun(scope.row)" />
              </div>
              <div v-if="scope.row.status=='closed'">
                <el-button size="small" type="warning" :icon="CloseBold" circle disabled @click="handleRun(scope.row)" />
              </div>
              <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
              >编辑项目</el-button>
              <el-button
                size="small"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button>
            </el-space>

          </template>
        </el-table-column>

      </el-table>

        <el-pagination
          :current-page="project.currentPage"
          :page-size="project.pageSize"
          :page-sizes="[5, 10, 50]"
          :small="small"
          :background="background"
          layout="total,sizes, prev, pager, next"
          :total="project.pageTotal"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />

      </el-tabs>
    </el-main>

  </el-container>

  <ProjectInfoDialog   :infoDialogData="formData.form"    v-model:infoDialog=recordDialogVisible  @renovate="ProjectItemSearch"> </ProjectInfoDialog>

  <RunDialog   :runDialogData="runData.form"   v-model:runDialog="runDialogVisible"   @renovate="ProjectItemSearch"></RunDialog>

  <UserInfoDialog  :account="accountName"  v-model:userDialog="userDialogVisible"  />
</template>

<script setup>
  import { VideoPlay,SwitchButton,CloseBold ,User,Pointer} from '@element-plus/icons-vue'
  import { Edit, Picture, UploadFilled,View as IconView } from '@element-plus/icons-vue'
  import { ProjectList ,ProjectGetById,ProjectSaveOrUpdate ,ProjectDelete} from '@/api/project'
  import { computed, ref,onMounted ,reactive,watch  } from 'vue'
  import {dateFtt} from '@/utils/dateTime.js';
  import RunDialog from 'views/project/comp/RunDialog.vue';
  import ProjectInfoDialog from 'views/project/comp/ProjectInfoDialog.vue';
  import UserInfoDialog from 'views/user/comp/UserInfoDialog.vue';
  import { useRouter } from 'vue-router'

  //左侧树配置
  const steps=reactive({
    stepsTitle:'',
    active:1,
    treeData:[],
    id:0
  });
  const handleNodeClick = (data) => {
    steps.active=2;
    steps.stepsTitle=data.label;
    steps.id=data.id;
    ProjectItemSearch();
  };

  const defaultProps = {
    children: 'children',
    label: 'label',
  };

  const getProjectSet =()=>{
    let param={
      currentPage:1,
      pageSize:10000,
    };

    ProjectList(param).then(res=>{
      let tableData = res.data.records;
      tableData.forEach( d =>{
        d.label=d.name;
        steps.treeData.push(d)
      });
    })
  };

  // 右侧列表配置
  const project=reactive({
    pageData:[],
    pageTotal:0,
    pageSize:5,
    currentPage:1,
    status:''
  });
  const handleCurrentChange = (current) => {
    project.currentPag=current;
    ProjectItemSearch();
  }
  const handleSizeChange = (size) => {
    project.pageSize=size;
    ProjectItemSearch();
  }

  const ProjectItemSearch= ()=>{

    let param={
      currentPage:project.currentPage,
      pageSize:project.pageSize,
      parent:steps.id,
      status:project.status
    };

    ProjectList(param).then(res=>{
      project.pageData= res.data.records;
    })
  }
  const handleTabs =()=>{
    ProjectItemSearch();
  }


  const handleDelete = (index, row) => {

    ElMessageBox.confirm('确定要删除这条数据?')
      .then(() => {
        let param={
          id:row.id
        }
        ProjectDelete(param).then(res =>{
          if(res.code==200) {
            ElMessage.success("数据删除成功!");
            ProjectItemSearch();
          }else{
            ElMessage.error(res.message);
          }
        })
      })
      .catch(() => {
      })
  }
  const recordDialogVisible=ref(false);
  const formData = reactive({
    form:{}
  })

  const handleEdit = (index,row) => {
    let param = {};
    param.id = row.id;
    ProjectGetById(param).then(res => {
      formData.form = res.data;
      recordDialogVisible.value = true;
    })
  }

  //新建项目集
  const handleAdd = () => {
    if(steps.id==0){
      ElMessage.error("请先选择一个项目集再新建项目");
    }else{
      formData.form = {
        model:'scrum',
        parent:steps.id,
      };
      recordDialogVisible.value = true;
    }

  }



  /**
   *  ----------------------------------------------
   * 修改运行状态方法
   **/
  const runDialogVisible=ref(false);
  const runData = reactive({
    form:{}
  })
  const handleRun = (row) => {
    runDialogVisible.value=true;
    runData.form=row;
  }

  /**
   * ----------------------------------------------
   * 用户查询
   * */
  const userDialogVisible=ref(false);
  const accountName=ref("");
  const handleUser=(account)=>{
    accountName.value=account;
    userDialogVisible.value=true;
  }



  /**
   * ----------------------------------------------
   * 看板跳转
   * */
  const router  = useRouter();

  const handleKanban=(projectId)=>{
    router.push({
      path: '/itemKanban',
      query: {
        projectId: projectId,
      }
    })
  }

  onMounted(()=>{
    getProjectSet();

  })

</script>
